<!--
-->
<template>
    <vxe-modal v-model="visible" :position="{top: '60px'}" :title="title" destroy-on-close  :min-width="layout.modalMinWidth(600)" resize show-footer show-maximize :width="layout.modalWidth(600)" :height="layout.modalHeight()" @close="cancelClick">
        <div class="content">
            <div v-html="state.options.content" class="value"></div>
        </div>
        <template #footer>
            <el-button :loading="isSubmitting" type="primary" @click="cancelClick">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "./api.js";

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const Model = () => {
    return {}
}

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据

}

onMounted(() => {
})
defineExpose({
    show
})
</script>


<style lang="scss" scoped>
.content {
    padding: 10px;
    max-height: 700px;
    overflow: auto;
    width: 100%;
    box-sizing: border-box;
    .value {
        width: 100%;
        box-sizing: border-box;
        img {
            width: 100%;
        }
    }
}
</style>
